<template>
  <div class="home">
    <!--
    vue的过渡动画
    可以使用vue的内置组件transition 结合css3动画来写
    transition 包裹要进行动画的元素 当包裹的元素出现消失和隐藏的效果时就会触发vue的过渡动画
    消失和隐藏的效果都有 v-show v-if 动态组件 路由 都可以触发过渡动画
    -->
    <transition name="fade">
      <div class="ani" v-if="show"></div>
    </transition>
    <button @click="show = !show">控制动画的执行</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Home',
  setup() {
    let show = ref(false)
    return {
      show
    }
  }
}
// .v-enter-from 动画执行的开始状态 v指的是给transition组件的name属性的值 
// .fade-leave-to 动画离开的结束状态
// fade-enter-active 进入动画的过程
// fade-leave-active 动画离开的过程
</script>
<style lang="scss" scoped>
.home {
  background-color: red;
}
  .ani {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: rotate(360deg) scale(2);
    
  }
  .fade-enter-active, .fade-leave-active {
    transition: all 1s;
  }
</style>
